<template>
  <div class="progress_wrapper">
    <!--<div @click="add">progress</div>-->
    <div class="progress_line">
      <div class="progress_back"></div>
      <div class="progress_percent" :style="{width: percent+'%'}"></div>
    </div>
    <div class="progress_number" v-if="percent<100">{{percent+'%'}}</div>
  </div>
</template>

<script>
  export default {
    name: "progressBar",
    props: {
      percent: {
        type: Number,
        default: 20
      }
    },
    data() {
      return {
        // percent: 20
      }
    },
    watch: {
      percent() {
        // console.log('this.percent', this.percent);
      }
    },
    methods: {
      add() {
        this.percent++;
      }
    }
  }
</script>

<style scoped lang="scss">
  .progress_wrapper {
    border-radius: 3px;
  }

  .progress_back {
    background-color: rgb(240, 240, 240);
    /*background-color: red;*/
    height: 10px;
    width: 100%;
    border-radius: 3px;
  }

  .progress_percent {
    background-color: rgb(41, 167, 242);
    height: 10px;
    border-radius: 3px;
    margin-top: -10px;
  }

  .progress_line {
    display: inline-block;
    width: 97%;
    border-radius: 3px;
  }

  .progress_number{
    display: inline-block;
    font-size: 12px;
  }
</style>
